<template>
    <ChartBlock ref="chart" height="600px" />
</template>

<script>
import { RoadSurfaceStatisticsModel } from '@/models'
import ChartBlock from '@/components/Charts'

export default {
    name: 'ForecastCurve',
    components: {
        ChartBlock
    },
    props: {
        code: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            model: new RoadSurfaceStatisticsModel(),
            chartInstance: null
        }
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter)
    },
    mounted() {
        this.$nextTick(() => {
            this.chartInstance = this.$refs.chart.getChartInstance()
            window.addEventListener('resize', this.screenAdapter)
            // 初始化个默认图表
            const data = [{ 0: 0 }, { 1: 0 }, { 2: 0 }, { 3: 0 }, { 4: 0 }, { 5: 0 }, { 6: 0 }, { 7: 0 }, { 8: 0 }, { 9: 0 }, { 10: 0 }]
            this.initChart(data)
        })
    },
    methods: {
        // 获取数据之后更新图表
        initChart(data, technicalIndicators) {
            // 处理图表需要的数据
            console.log(data)
            const xAxisData = data.map((item) => Object.keys(item)[0])
            const seriesData = data.map((item) => Object.values(item)[0])
            const dataOption = {
                title: {
                    text: '预测曲线',
                    left: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true // 距离是包含坐标轴上的文字
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#222',
                    formatter: '<span style="font-size: 14px;">第{b}年度</span><br/>预测曲线: {c}',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                        fontFamily: ' PingFang SC'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: technicalIndicators || 'PCI',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        fontWeight: 'bold'
                    },
                    nameGap: 32
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        show: true, // 是否显示刻度标签，默认显示
                        interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
                        margin: 6 // 刻度标签与轴线之间的距离
                    },
                    name: '年度',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        fontWeight: 'bold'
                    },
                    nameGap: 32
                },
                series: {
                    data: seriesData,
                    barWidth: 20,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#e50834'
                    }
                }
            }
            this.chartInstance.setOption(dataOption)
            this.chartInstance.resize()
        },
        // 屏幕变化时调整图表
        screenAdapter() {
            this.chartInstance.resize()
        }
    }
}
</script>

<style>
</style>
